<template>
    <div id="school-more">
        <div id="more-title">
            <span>学校介绍</span>
        </div>
        <div id="more-name" v-for="(item,i) in schoolmore" :key='i'>
            <router-link :to="`/school?id=${item.sid}`">
                {{item.sname}}
            </router-link>
        </div>
        <div class="pagination">
            <button class="first" :class="{a:fdisable}" @click="dianji('first')" :disabled='fdisable'>首页</button>
            <button class="prev" :class="{a:fdisable}" @click="dianji('-')" :disabled='fdisable'>上页</button>
            <button class="next" :class="{b:ldisable}" @click="dianji('+')" :disabled='ldisable'>下页</button>
            <button class="last" :class="{c:ldisable}" @click="dianji('last')" :disabled='ldisable'>末页</button>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            schoolmore:[],
            page:1,
            pagecount:0,
            id:0,
            fdisable:true,
            ldisable:false
        }
    },
    methods:{
        dianji:function(a){
            if(a=='first'){
                this.page=1;
                this.fdisable=true
                this.ldisable=false
            }else if(a=='-'){
                this.page--;
                if(this.page===1){
                    this.fdisable=true
                }
                this.ldisable=false
            }else if(a=='+'){
                this.page++;
                if(this.page===this.pagecount){
                    this.ldisable=true
                }
                this.fdisable=false
            }else if(a=='last'){
                this.page=this.pagecount;
                this.ldisable=true;
                this.fdisable=false;
            }
        }
    },
    mounted(){
        this.id = this.$route.query.pid;
        //this.id拿不到  this.id=undefined
        console.log(this.id);
        // 发送http请求  加载当前文章的详细数据  
        this.axios.get(`/schoolmore?pid=${this.id}&page=${this.page}`).then(result=>{
            console.log(result);
            // 把文章详情保存在data中，供页面{{}}使用
            this.schoolmore = result.data.results;
            this.pagecount=result.data.pagecount;
            })
    },
    watch: {
        page(nawval){
            console.log(nawval)
            this.axios.get(`/schoolmore?pid=${this.id}&page=${nawval}`).then(result=>{
            console.log(result);
            // 把文章详情保存在data中，供页面{{}}使用
            this.schoolmore = result.data.results;
            this.pagecount=result.data.pagecount;
            })
        }
    }
}
</script>
<style scoped>
*{
    margin: 0;
    padding: 0;
}
#school-more{
    width: 90%;
    margin-left: 5%;
}
#more-title{
    padding-bottom: 3vw;
    margin-top: 8vw;
    font-size: 6vw;
    border-bottom: 1vw solid #f8eaeb;
    margin-bottom: 10vw;
    font-weight: bold;
}
#more-title>span{
    padding-bottom: 3vw;
    border-bottom: 1vw solid #bc272e;
}
#more-name{
    margin-bottom: 5vw;
    padding-bottom: 5vw;
    border-bottom: 0.1vw solid grey;
}
#more-name>a{
    color: black;
}
.pagination{
    display: flex;
    font-size:1vw;
    justify-content: center;
    /* width:100%;   */
    color: rgb(25,137,250);
}
.first,.prev,.next,.last{
    background-color: white;
    border: 0.1vw solid rgb(25,137,250);
    border-right: none;
    height: 8vw;
    padding: 1vw;
}
.first{
    border-radius: 1vw 0 0 1vw;
}
.last{
    border-right: 0.1vw solid rgb(25,137,250);
    border-radius: 0 1vw 1vw 0;
}
.a{
    border: 0.1vw solid grey;
    border-right: none;
    color: grey;
}
.b{
    border: 0.1vw solid grey;
    border-left: 0.1vw solid rgb(25,137,250);
    border-right:none ;
    color: grey;
}
.c{
    border: 0.1vw solid grey;
    color: grey;
}
</style>
